<!-- 其他任务配置 -->
<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
    <div class="other-config" :key="configKey" v-if="dialogVisible">
      <el-tabs v-model="activeName" tab-position="left">
        <el-tab-pane :name="tabMenus[0].name" :label="tabMenus[0].label">
        </el-tab-pane>
        <el-tab-pane :name="tabMenus[1].name" :label="tabMenus[1].label">
        </el-tab-pane>
        <el-tab-pane :name="tabMenus[2].name" :label="tabMenus[2].label">
        </el-tab-pane>
        <el-tab-pane :name="tabMenus[3].name" :label="tabMenus[3].label">
        </el-tab-pane>
        <el-tab-pane :name="tabMenus[4].name" :label="tabMenus[4].label">
        </el-tab-pane>
      </el-tabs>
      <div class="tabs-com">
        <SelectDataSource
          v-if="activeName === tabMenus[0].name"
          :config-info="configInfo"
          :data-bases="dataBases"
          ref="selectDataSourceRef"
        />
        <!-- :config-info="configInfo.mappings" -->
        <ModelMap
          v-if="activeName === tabMenus[1].name"
          :config-info="configInfo"
          :source-table="configInfo.sourceTableNames"
          :source-id="configInfo.sourceDataId"
          :target-source-id="configInfo.targetSourceDataId"
          :target-model-names="configInfo.targetModelNames"
          ref="modelMapRef"
        />
        <FilterData
          v-if="activeName === tabMenus[2].name"
          :config-info="configInfo.filterDataMap"
          :source-table="configInfo.sourceTableNames"
          :source-id="configInfo.sourceDataId"
          :mappings="configInfo.mappings"
          ref="filterDataRef"
        />
        <ClearData
          v-if="activeName === tabMenus[3].name"
          :config-info="configInfo.cleanDataMap"
          :target-model="configInfo.targetModelNames"
          ref="clearDataRef"
        />
        <ScheduleTask
          v-if="activeName === tabMenus[4].name"
          :config-info="configInfo.taskSchedule"
          :activeName="activeName"
          ref="scheduleTaskRef"
        />
      </div>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmDialog">保存</el-button>
    </template>
  </el-dialog>
</template>
<script>
import SelectDataSource from "./otherComponents/SelectDataSource.vue";
import ModelMap from "./otherComponents/ModelMap.vue";
import FilterData from "./otherComponents/FilterData.vue";
import ClearData from "./otherComponents/ClearData.vue";
import ScheduleTask from "./otherComponents/ScheduleTask.vue";
export default {
  name: "OtherConfig",
  components: {
    SelectDataSource,
    ModelMap,
    FilterData,
    ClearData,
    ScheduleTask,
  },
  data() {
    return {
      configKey: 1,
      dialogTitle: "配置任务",
      dialogVisible: false,
      tabMenus: [
        {
          label: "选择数据源",
          name: "selectDataSource",
        },
        {
          label: "模型映射",
          name: "modelMap",
        },
        {
          label: "过滤数据",
          name: "filterData",
        },
        {
          label: "清理数据",
          name: "clearData",
        },
        {
          label: "定时任务",
          name: "scheduleTask",
        },
      ],
      tabIndexMap: {
        selectDataSource: 0,
        modelMap: 1,
        filterData: 2,
        clearData: 3,
      },
      activeName: "selectDataSource",
      configInfo: {},
      dataBases: [],
    };
  },
  watch: {
    activeName: {
      async handler(val, old) {
        if (val !== old) {
          let configData = {}
          if (old == this.tabMenus[0].name) {
            configData = await this.$refs.selectDataSourceRef.getData();
          }
          if (old == this.tabMenus[1].name) {
            configData = await this.$refs.modelMapRef.getData();
          }
          if (old == this.tabMenus[2].name) {
            configData = await this.$refs.filterDataRef.getData();
          }
          if (old == this.tabMenus[3].name) {
            configData = await this.$refs.clearDataRef.getData();
          }
          if (old == this.tabMenus[4].name) {
            configData = await this.$refs.scheduleTaskRef.getData();
          }
          this.configInfo = {
            ...this.configInfo,
            ...configData
          }
          
          console.log('%c [ this.configInfo ]-142', 'font-size:13px; background:pink; color:#bf2c9f;', this.configInfo)
        }
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    // 打开弹窗
    openDialog(info) {
      this.dialogTitle = `配置任务${info.taskName ? "：" + info.taskName : ""}`;
      this.configInfo = info;
      this.configInfo.taskId = info.id
      console.log('%c [ info ]-152', 'font-size:13px; background:pink; color:#bf2c9f;', info)
      this.getDataBaseInfo();
      // 重置
      this.configKey++;
      this.activeName = "selectDataSource";
      this.dialogVisible = true;
    },
    // 获取数据库信息
    getDataBaseInfo() {
      this.$axios
        .get(this.$api.dataConnection.physicalModel.getDataBases, {
          params: { targetType: "all" },
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.dataBases = res.data.data || [];
          } else {
            this.$message.warning(res.data.message);
          }
        });
    },
    async confirmDialog() {
      let configData = {}
      if (this.activeName == this.tabMenus[0].name) {
        configData = await this.$refs.selectDataSourceRef.getData();
      }
      if (this.activeName == this.tabMenus[1].name) {
        configData = await this.$refs.modelMapRef.getData();
      }
      if (this.activeName == this.tabMenus[2].name) {
        configData = await this.$refs.filterDataRef.getData();
      }
      if (this.activeName == this.tabMenus[3].name) {
        configData = await this.$refs.clearDataRef.getData();
      }
      if (this.activeName == this.tabMenus[4].name) {
        configData = await this.$refs.scheduleTaskRef.getData();
      }
      this.configInfo = {
        ...this.configInfo,
        ...configData
      }
      try {
        this.$axios
          .post(this.$api.dataConnection.dataAggregation.saveTaskConfig, this.configInfo)
          .then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message || "配置成功");
              this.dialogVisible = false;
            } else {
              this.$message.warning(res.data.message);
            }
          });
      } catch {}
    },
  },
};
</script>
<style lang="scss" scoped>
.other-config {
  display: flex;
  height: 50vh;
  overflow: hidden;
}

.tabs-com {
  flex: 1;
  overflow: hidden;
  overflow-y: auto;
}
</style>
